<template>
    <div>  
         <!-- 面包屑导航区域 -->
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>


<!-- 卡片视图 -->
<el-card>

   <el-row>
       <el-col>
       <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
       </el-col>
   </el-row>

<!-- 表格区 -->





    <tree-table 
     class="treeTable"
    :data="catelist"
    show-index
    border

    :columns="columns"
    :selection-type='false'
    :expand-type='false'
    >
    <template slot="isok" slot-scope="scope">
     <i class="el-icon-success"
       style="color:lightgreen"
       v-if="scope.row.cat_deleted===false"></i>


     <i class="el-icon-error"
      style="color:red"
      v-else></i>

    </template>

    <template slot="order" slot-scope="scope">


   <el-tag v-if="scope.row.cat_level===0">一级</el-tag>
  <el-tag type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
   <el-tag type="warning" v-else>三级</el-tag>

     
    </template>

     <template slot="opt">
       <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
       <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>

    </template>    



    </tree-table>

<!-- 分页区 -->


<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


</el-card>


<!-- 添加分类的对话框 -->
<el-dialog
  title="添加分类"
  :visible.sync="addCateDialogVisible"
  width="50%"
  @close = "addCateDialogClose"
    >
    <!-- 添加分类表单 -->
 <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px" class="demo-ruleForm">
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>

   <el-form-item label="分级分类" >
       <!-- props指定配置对象 -->
      <el-cascader  
      clearable
      v-model="selectedKeys"
    :options=" parentCateList"
    :props="cascaderProps"
    @change="parentCateChanged"
   ></el-cascader>
  </el-form-item>
  
  </el-form>
  <span slot="footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=" addCate">确 定</el-button>
  </span>
</el-dialog>

</div>
</template>

<script>
    export default{
    data(){
        return{
            //  商品分类数据列表
            catelist:[],
            // 查询条件
            querInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            // 总数据数
            total:0,
            // 定义columns列
            columns:[
                {
                    label:'分类名称',

                    prop:'cat_name'
                },
                {
                    label:'是否有效',
                    // 当前列定为模板列
                    type:'template',
                    // 插槽名称为isok
                    template:'isok',
                },
                {
                    label:'排序',
                    type:'template',
                    template:'order'
                },


                {
                    label:'操作',
                    type:'template',
                    template:'opt'

                }
            ],
            // 控制添加分类对话的隐藏
            addCateDialogVisible:false,
            // 添加分类表单
            addCateForm:{
             cat_name:'',
            //  父级分类id
             cat_pid:0,
            //  默认分类等级为0
             cat_level:0
            },
            addCateFormRules:{
                cat_name:[
           {required:true,message:'请输入分类名称',trigger:'blur'},
         
                ]
            },
        // 父级分类列表
            parentCateList:[],
            // 指定联级选择器的配置对象
            cascaderProps:{
                expandTrigger:'hover',
                value:'cat_id',
                label:'cat_name',
                children:'children',
                checkStrictly:true
            },
            selectedKeys:[]
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
      async   getCateList(){
              
         const {data:res} = await  this.$http.get('categories',{params:this.querInfo})

         if(res.meta.status!==200) {
             return this.$message.error("获取商品数据失败");
         }
        //  console.log(res);
        // 把获取的数据列表赋值给列表
             this.catelist = res.data.result
            //  console.log(this.catelist);
             this.total = res.data.total
          },
     handleSizeChange(newSize){
              this.querInfo.pagesize=newSize
              this.getCateList()

     },

     handleCurrentChange(newPage){
         this.querInfo.pagenum = newPage
               this.getCateList()
     },
     showAddCateDialog(){
          this.getParentCateList()   
         this.addCateDialogVisible = true
     },
   async  getParentCateList(){
  const {data:res} = await      this.$http.get('categories',{
              params:{type:2}
         })
        if(res.meta.status!==200)
        {
            return this.$message.error("获取父级分类列表失败")
        }

        this.parentCateList =res.data

     },
    //  选择项发生变化触发
     parentCateChanged(){
         if(this.selectedKeys.length>0){
         this.addCateForm.cat_pid =  this.selectedKeys[this.selectedKeys.length-1]
            
           
           this.addCateForm.cat_level = this.selectedKeys.length
         
         return
         
         }else{
             this.addCateForm.cat_pid =  0
            
            this.addCateForm.cat_level = 0
         }
         
     },
     addCateDialogClose(){
         this.$refs.addCateFormRef.resetFields()
         this.selectedKeys = []
         this.addCateForm.cat_level = 0
         this.addCateForm.cat_pid = 0
     },
   addCate(){
         this.$refs.addCateFormRef.validate(async   valid =>{
           
           if(!valid) return
          
          
      const {data:res} = await this.$http.post('categories',this.addCateForm)
         if(res.meta.status!== 201){
             return this.$message.error('添加分类失败')
         } 

         this.$message.success('提交分类成功')
         this.getCateList()
         this.addCateDialogVisible = false
         })
     }
     
    }

}

</script>
<style scoped>

 .treeTable{
     margin-top: 15px;
 }
.el-cascader{
    width: 100%;
} 

</style>